<template>
  <el-row :gutter="20" class="user-index-container">
    <el-col :span="10" class="user-index-data-box">
      <h3 class="animated fadeInUp">短链数据</h3>
      <div class="content-card">
        <el-card class="animated fadeInUp" v-for="(item,key) in indexData.shortLinkVisit" :key="item">
          <div class="content-card-left">
            <div class="left-logo">
              <img :src="datStatisticsImgSrc+item.img+'.png'" :alt="item.img">
            </div>
            <div class="content-card-left-text">
              <span class="content-card-data" :id="key">{{ item.data }}</span>
              <span class="content-card-title">{{ item.title }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <h3 class="animated fadeInUp">活码数据</h3>
      <div class="content-card">
        <el-card class="animated fadeInUp" v-for="(item,key) in indexData.liveCodeVisit" :key="item">
          <div class="content-card-left">
            <div class="left-logo">
              <img :src="datStatisticsImgSrc+item.img+'.png'" :alt="item.img">
            </div>
            <div class="content-card-left-text">
              <span class="content-card-data" :id="key">{{ item.data }}</span>
              <span class="content-card-title">{{ item.title }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="7" class="user-index-log-box">
      <h3 class="animated fadeInUp">更新日志</h3>
      <el-card class="update-log-card animated fadeInUp" v-loading="indexData.updateLogList.length < 1">
        <el-timeline>
          <el-timeline-item v-for="item in indexData.updateLogList" :key="item.id" v-show="item.status !== 0" :title="item.description" :timestamp="item.description" @click="pageJump(item.slug)">
            <div class="log-title" :title="item.title">{{ item.title }}</div>
            <span class="create-time">{{ $filter('YYYY-mm-dd HH:MM:SS',new Date(item.created_at)) }}</span>
          </el-timeline-item>
        </el-timeline>
        <div class="search-more-link">
          <el-link :href="indexData.yuQueUpdateLogLink" target="_blank">点击查看更多 ></el-link>
        </div>
      </el-card>
    </el-col>
    <el-col :span="7" class="user-index-version animated fadeInUp">
      <div class="user-index-version-header">
        <img :src="imgRootSrc+'head_portrait.png'" class="head-portrait" alt="head-portrait">
        <div class="user-index-version-header-content">
          <h3>JQZ KEJI</h3>
          <div class="version-box">
            <img :src="imgRootSrc+'enterprise_version_black.png'" alt="enterprise_version_black">
            企业版
          </div>
          <div class="expire-date">距离授权到期：60天</div>
        </div>
      </div>
      <div class="user-index-version-info">
        <el-descriptions title="版本信息" :column="1">
          <el-descriptions-item label="短链数量：">不限制</el-descriptions-item>
          <el-descriptions-item label="活码数量：">不限制</el-descriptions-item>
          <el-descriptions-item label="日扫码数量：">不限制</el-descriptions-item>
          <el-descriptions-item label="域名检测点数：">{{ indexData.userInfo.point }}</el-descriptions-item>
          <el-descriptions-item label="监控额度：">不限制</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-col>
    <el-col :span="24" class="user-index-quick-entry-col">
      <h3 class="animated fadeInUp">快捷入口</h3>
      <el-row class="animated fadeInUp">
        <el-col :span="4" v-for="item in indexData.quickEntry" :key="item">
          <el-card @click="$router.push(`/user-center/${item.url}`)">
            <img :src="imgRootSrc+item.img+'.png'" :alt="item.img">
            <span>{{ item.title }}</span>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup>
import { getCurrentInstance, reactive } from 'vue'
import { getUserData, getIndexData, getYuQueLog } from '@/axios/userRequest'
import axios from 'axios'
const { proxy } = getCurrentInstance()
const imgRootSrc = '/img/user-index-images/'
const datStatisticsImgSrc = '/img/data-statistics-images/'

// 首页数据
const indexData = reactive({
  userInfo: {// 用户检测余额信息
    point: 0,
    monitor: 0,
    monitored: 0,
  },
  shortLinkVisit: {// 短链访问数据
    'today_visit_num': { title: '今日新访客', data: 0, img: 'eye_logo' },
    'total_num': { title: '累计访问人数', data: 0, img: 'time_logo' },
    'is_wifi_num': { title: 'Wifi访问人数', data: 0, img: 'wifi_logo' },
    'is_not_wifi': { title: '移动数据访问人数', data: 0, img: 'data_logo' },
  },
  liveCodeVisit: {// 活码访问数据
    'code_today_scan_num': { title: '今日扫码次数', data: 0, img: 'scan_code_today_logo' },
    'code_today_scan_person': { title: '今日扫码人数', data: 0, img: 'number_of_scanners_today_logo' },
    'code_total_num': { title: '累计扫码次数', data: 0, img: 'cumulative_scan_times_logo' },
    'code_total_peo_num': { title: '累计扫码人数', data: 0, img: 'total_number_of_scanned_codes_logo' },
  },
  quickEntry: [// 快捷入口
    { title:'短链管理', img: 'create_short_link_logo', url: 'short-link-manage/0' },
    { title:'创建活码', img: 'create_live_code_logo', url: 'live-code/create' },
    { title:'域名检测', img: 'detect_logo', url: 'domain-detection' },
    { title:'状态监控', img: 'tips_logo', url: 'monitor-system' },
    { title:'短链域名', img: 'live_code_logo', url: 'short-domain' },
    { title:'活码域名', img: 'short_chain_logo', url: 'live-code-domain' },
  ],
  yuQueUpdateLogLink: 'https://www.yuque.com/nte1sn/ngd5zk',// 语雀更新日志
  updateLogList: [],// 更新日志列表
})
// 获取数据
const getAllData = ()=>{
  axios.all([getIndexData(), getYuQueLog()]).then(res=>{
    if(res[0].code === 0){
      for(let key in res[0].data){
        let dataKey = res[0].data[key]
        if(Object.keys(indexData.shortLinkVisit).includes(key)){
          indexData.shortLinkVisit[key].data = dataKey.count
          DynamicNumber.show(key,dataKey.count)
        }
        if(Object.keys(indexData.liveCodeVisit).includes(key)){
          indexData.liveCodeVisit[key].data = dataKey.count
          DynamicNumber.show(key,dataKey.count)
        }
        if(key === 'code_today_scan_data' && dataKey.length > 0){
          if(dataKey['访问次数']){
            indexData.liveCodeVisit['code_today_scan_num'].data = dataKey['访问次数']
            DynamicNumber.show('code_today_scan_num', dataKey['访问次数'])
          }else{
            indexData.liveCodeVisit['code_today_scan_num'].data = 0
          }
          if(dataKey['访问人数']){
            indexData.liveCodeVisit['code_today_scan_person'].data = dataKey['访问人数']
            DynamicNumber.show('code_today_scan_person', dataKey['访问人数'])
          }else{
            indexData.liveCodeVisit['code_today_scan_person'].data = 0
          }
        }
      }
    }else{
      proxy.$message.error(res[0].msg)
    }
    res[1].code === 0 ? indexData.updateLogList = (res[1].data.data.filter(item => item.status !== 0)).slice(0,5) : ''
  }).catch(err=>{})
}
const getYmjcData = async ()=>{
  const res = await getUserData()
  res.data.status === 'success' ? indexData.userInfo = res.data.data : proxy.$message.error(res.data.msg+'请检查token值是否正确！')
}
getAllData()
getYmjcData()
// 跳转更新日志
const pageJump = slug=>{
  window.open(`${indexData.yuQueUpdateLogLink}/${slug}`)
}
const DynamicNumber = {};
DynamicNumber.NumberList = {};
DynamicNumber.show = function (elementId, number) {
  // 1. 已建立过对象直接调用
  let dynaNum = this.NumberList[elementId];
  if (dynaNum) {
    dynaNum.step = 0;
    dynaNum.desNumber = number;
    dynaNum.render();
    return;
  }
  // 2. 创建动态数字绘制对象
  dynaNum = new function (_elementId) {
    this.elementId = _elementId;
    this.preNumber = 0; // 变化过程值
    this.desNumber = 0; // 目标数值，最终显示值
    this.step = 0;  // 变化步长，支持正向反向
    // 绘制过程
    this.render = function () {
      // （1）结束条件
      if (this.preNumber == this.desNumber) {
        this.step = 0;
        return;
      }
      // （2）步长设置（计划 2 秒完成 40*50=2000）
      if (this.step == 0) {
        this.step = Math.round((this.desNumber - this.preNumber) / 40);
        if (this.step == 0) this.step = (this.desNumber - this.preNumber > 0) ? 1 : -1;
      }
      // （3）走一步
      this.preNumber += this.step;
      if (this.step < 0) {
        if (this.preNumber < this.desNumber) this.preNumber = this.desNumber;
      } else {
        if (this.preNumber > this.desNumber) this.preNumber = this.desNumber;
      }
      // （4）显示
      document.getElementById(this.elementId).innerHTML = this.preNumber;
      // （5）每秒绘制 20 次（非精确值）
      let _this = this;
      setTimeout(function () { _this.render(); }, 20);
    };
  } (elementId);
  // 3. 登记绑定元素ID
  DynamicNumber.NumberList[elementId] = dynaNum;
  // 4. 调用绘制
  dynaNum.step = 0;
  dynaNum.desNumber = number;
  dynaNum.render();
}
</script>

<style lang="less" scoped>
.user-index-container {
  min-height: calc(100vh - 108px);
  h3{
    margin-bottom: 20px!important;
  }
  .user-index-data-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content-card {
      display: grid;
      grid-column-gap: 20px;
      grid-template-columns: 1fr 1fr;
      margin-bottom: 20px;
      &:deep(.el-card){
        height: 103px!important;
        &:nth-of-type(1),
        &:nth-of-type(2){
          margin-bottom: 20px;
        }
      }
    }
  }
  .user-index-log-box{
    padding-right: 20px!important;
    .update-log-card{
      height: calc(100% - 70px);
      max-height: 580px;
      &:deep(.el-card__body){
        height: calc(100% - 60px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30px;
        .el-timeline{
          padding-left: 0;
          .el-timeline-item{
            padding-bottom: 0;
            .el-timeline-item__tail{
              margin: 25px 0 20px;
              height: calc(100% - 30px);
              background-color: #F3F5FA;
              border-left-width: 1px;
            }
            .el-timeline-item__node{
              width: 12px;
              height: 12px;
              background: url("/img/user-index-images/time_icon.png");
            }
            .el-timeline-item__wrapper{
              cursor: pointer;
              .el-timeline-item__content{
                .log-title{
                  &:hover{
                    color:@primary;
                  }
                }
              }
              .el-timeline-item__timestamp{
                height: 37px;
                font-size: 12px;
                color: @secondary;
                margin-top: 12px;
                margin-bottom: 15px;
                box-sizing: border-box;
                line-height: 18px;
                overflow: hidden;
                text-overflow:ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
              .el-timeline-item__content{
                padding-top: 0;
                font-weight: 500;
                margin-bottom: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .log-title{
                  font-size: 16px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .create-time{
                  color: @tips-text;
                  font-size: 12px;
                  min-width: 130px;
                  text-align: right;
                }
              }
            }
          }
        }
        .search-more-link{
          text-align: right;
          .el-link{
            color: #999999;
            &:hover{
              color: @primary;
            }
          }
        }
      }
    }
  }
  .user-index-version {
    border-radius: 8px 52px 8px 8px;
    background-color: #FFFFFF;
    padding: 0 !important;
    margin-bottom: 20px;
    .user-index-version-header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 200px;
      box-sizing: border-box;
      background: url("/img/user-index-images/ground_glass_bg.png") no-repeat;
      background-size: cover;
      border-radius: 0 52px 0 0;
      padding-left: 30px;
      .head-portrait {
        margin-right: 32px;
      }
      .user-index-version-header-content {
        height: 120px;
        h3 {
          font-size: 24px;
        }
        .version-box {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 128px;
          height: 32px;
          border-radius: 4px;
          border: 1px solid @subtitle;
          color: @subtitle;
          margin-top: 16px;
          font-size: 14px;

          img {
            margin-right: 13px;
          }
        }

        .expire-date {
          color: @secondary;
          margin-top: 12px;
          font-size: 12px;
        }
      }
    }

    .user-index-version-info {
      padding: 30px;
      &:deep(.el-descriptions){
        .el-descriptions__header{
          margin-bottom: 32px;
          .el-descriptions__title{
            font-size: 20px;
          }
        }
        .el-descriptions__body{
          font-size: 16px;
          tr{
            td{
              padding-bottom: 32px;
              .el-descriptions__label{
                color: @title;
                margin-right: 0!important;
              }
              .el-descriptions__content{
                color: @primary;
              }
            }
            &:nth-last-of-type(1){
              td{
                padding-bottom: 0;
              }
            }
          }
        }
      }
    }
  }

  .user-index-quick-entry-col{
    padding-right: 0!important;
    .el-row{
      .el-col{
        .el-card{
          border-radius: 0;
          &:deep(.el-card__body){
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            box-sizing: border-box;
            img{
              width: 100px;
            }
            span{
              color: @secondary;
              font-size: 17px;
              margin-top: 15px;
            }
          }
        }
      }
    }
  }
}
</style>
